<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%--引入标签库--%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel > .layui-card-bodys{
            height: 100px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
        }
        .layui-card-header{
            letter-spacing: 0.2rem;
            font-size: 1.5rem;
            background-image: -webkit-linear-gradient(left, #c4ebad, #E6D205 25%, #147B96 50%, #E6D205 75%, #c4ebad);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            -webkit-animation: maskedAnimation 4s infinite linear;
        }
        @keyframes maskedAnimation {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -100% 0;
            }
        }
        table{
            width: 230px;
            margin: 0 auto;
        }
        .ss{
            text-align: center;
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
        }
        .ss1{
            text-align: center;
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
            letter-spacing: 0.2rem;
            font-size: 0.5rem;
            background-image: -webkit-linear-gradient(left, #c4ebad, #E6D205 25%, #147B96 50%, #E6D205 75%, #c4ebad);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            -webkit-animation: maskedAnimation 4s infinite linear;
        }
        tr:hover{
            text-align: center;
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
            color: #00b8ff;
            text-shadow: 2px 2px 4px;
        }
        .bjsz{
            background-color: #c4ebad;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            box-shadow: 0 0 8px #c4ebad;
            margin: 0px 33px;
        }
        .bjszs{
            width: 154.2px;
            height: 60px;
            border-right:2px solid #0c0f13;
        }
        .bjszx{
            width: 180px;
            height: 60px;
            border-right:2px solid #0c0f13;
        }
        .bjszxx{
            width: 180px;
            height: 60px;
        }
        .bjszss{
            width: 154.2px;
            height: 60px;
        }
        .bszt{
            font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
            color: white;
            font-size: 0.9px;
        }
        .kzdiv{
            display:flex;
        }
        #yhtp{
           display: flex;
        }
        #yhtps{
            display: flex;
        }
        .echarts-pies{
            font-size: 20px;
            font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '黑体', Arial, sans-serif;
            background-image: -webkit-linear-gradient(left, #c4ebad, #E6D205 25%, #147B96 50%, #E6D205 75%, #c4ebad);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            -webkit-animation: maskedAnimation 4s infinite linear;
        }
        #hg{
            line-height: 51px;
            font-size: 10px;
        }
.gao{
    height: 5px;
}
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">用户数量</div>
                <div class="layui-card-body">
                    <div id="yhtp">
                    <div><img src="static/img/用户.png" alt=""></div>
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number" id="yhsl"></div>
                    </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">商品数量</div>
                <div class="layui-card-body">
                    <div id="yhtps">
                    <div><img src="static/img/商品购买.png" alt=""></div>
                        <div class="top-panel-number" id="spsl"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card top-panel">
                <div class="layui-card-header">常用操作</div>
                <div class="layui-card-body">
                    <div class="kzdiv">
                        <a href="yonghuchaxun.jsp"><div class="bjsz" data-anim="layui-anim-scaleSpring"><img src="static/img/商品管理.png" width="24px" height="24px"><div class="bszt">商品管理</div></div></a>
                        <a href="addsp.jsp"> <div class="bjsz" data-anim="layui-anim-scaleSpring"><img src="static/img/发布.png" width="24px" height="24px"><div class="bszt">发布商品</div></div></a>
                        <a href="cssss.jsp"> <div class="bjsz" data-anim="layui-anim-scaleSpring"><img src="static/img/类型.png" width="22px" height="22px"><div class="bszt">商品类型</div></div></a>
                        <a href="shangpinchaxun.jsp">   <div class="bjsz" data-anim="layui-anim-scaleSpring"><img src="static/img/用户_填充.png" width="24px" height="24px"><div class="bszt">查看用户</div></div></a>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card top-panel">
<%--            <div class="layui-card-header">订单信息</div>--%>
            <div class="layui-card-bodys">
                <div class="gao"></div>
                <div>订单信息</div>
                <div class="gao"></div>
                <div class="gao"></div>
                <div class="kzdiv">
                    <a href=""><div class="bjszs" data-anim="layui-anim-scaleSpring"><span>订单总量</span><div class="szzt">订单总量</div></div></a>
                    <a href=""><div class="bjszs" data-anim="layui-anim-scaleSpring"><span>交易成功</span><div class="szzt">订单总量</div></div></a>
                    <a href=""><div class="bjszs" data-anim="layui-anim-scaleSpring"><span>交易失败</span><div class="szzt">订单总量</div></div></a>
                    <a href=""><div class="bjszs" data-anim="layui-anim-scaleSpring"><span>待付款订单</span><div class="szzt">订单总量</div></div></a>
                    <a href=""><div class="bjszs" data-anim="layui-anim-scaleSpring"><span>待服务订单</span><div class="szzt">订单总量</div></div></a>
                    <a href=""><div class="bjszs" data-anim="layui-anim-scaleSpring"><span>待评价订单</span><div class="szzt">订单总量</div></div></a>
                    <a href=""><div class="bjszss" data-anim="layui-anim-scaleSpring"><span>退款订单</span><div class="szzt">订单总量</div></div></a>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card top-panel">
            <%--            <div class="layui-card-header">订单信息</div>--%>
            <div class="layui-card-bodys">
                <div class="gao"></div>
                <div>服务信息</div>
                <div class="gao"></div>
                <div class="gao"></div>
                <div class="kzdiv">
                    <a href=""><div class="bjszx" data-anim="layui-anim-scaleSpring"><span>出售中的服务:</span>订单总量</div></a>
                    <a href=""><div class="bjszx" data-anim="layui-anim-scaleSpring"><span>已下单的服务:</span>订单总量</div></a>
                    <a href=""><div class="bjszx" data-anim="layui-anim-scaleSpring"><span>违规下单的服务:</span>订单总量</div></a>
                    <a href=""><div class="bjszx" data-anim="layui-anim-scaleSpring"><span>服务咨询数:</span>订单总量</div></a>
                    <a href=""><div class="bjszx" data-anim="layui-anim-scaleSpring"><span>服务收款数:</span>订单总量</div></a>
                    <a href=""><div class="bjszxx" data-anim="layui-anim-scaleSpring"><span>服务订单数:</span>订单总量</div></a>
                </div>
            </div>
        </div>

    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px">
                <div class="echarts-pies">管理员</div>
                <br>
                <div id="main">
                    <table cellpadding="0" cellspacing="0" id="hg">
                        <c:forEach items="${all}" var="item">
                            <tr>
                                <td class="ss">姓名:${item.name} </td>
                                <td class="ss"> 联系信息:${item.phone}</td>
                                <c:if test="${item.zhuangtai>=1}">
                                    <td class="ss" style="color: #00FF00">正常</td>
                                </c:if>
                                <c:if test="${item.zhuangtai<=0}">
                                    <td class="ss" style="color: #ed2a4a">已封禁</td>
                                </c:if>
                            </tr>
                        </c:forEach>
                    </table>
                    <br>
                    <p class="ss">
                        <c:if test="${pages.currentPage>1}">
                            <a href="gly?opr=kk&current=1" class="ss1" >首页</a>&nbsp;
                            <a href="gly?opr=kk&current=${pages.currentPage-1}" class="ss1">上一页</a>&nbsp;
                        </c:if>
                        <c:if test="${pages.currentPage<pages.totalPage}">
                            <a href="gly?opr=kk&current=${pages.currentPage+1}" class="ss1">下一页</a>&nbsp;
                            <a href="gly?opr=kk&current=${pages.totalPage}" class="ss1">末页</a>&nbsp;
                        </c:if>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md4">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md8">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>

</div>
<!--</div>-->
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">
    $("a[clss=ss1]").click(function () {
        $("#main").load(location.href + " #main>*", "");
    })
</script>
<script type="text/javascript">
    window.name = "lode";
    layui.use(['layer', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
//查用户
        $.ajax({
            "url": "member?opr=indexyh",
            "dataType": 'text',
            "type": 'post',
            async: false,
            "success": function (date) {
                $("#yhsl").text(date);
            }
        });
        $.ajax({
            "url": "spcx?opr=indexsp",
            "dataType": 'text',
            "type": 'post',
            async: false,
            "success": function (date) {
                $("#spsl").text(date);
            }
        });
        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                text: '报表图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '邮件营销',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'line',
                    areaStyle: {},
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '直接访问',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '搜索引擎',
                    type: 'line',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    },
                    areaStyle: {},
                    data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        echartsRecords.setOption(optionRecords);
        /**
         * 柱状图
         */
        $(function(){
            ajaxtest();
        });

        function ajaxtest() {
            $.ajax({
                async:false,
                url:'member?opr=tj',
                type:'POST',
                dataType : 'json',
                success:function (objects1) {
                    initChart(objects1);
                }
            });
        }

        function formatData(data) {

            var xAxis = [];
            var serData =[];

            for(var i = 0 ; i < data.length ; i++){
                xAxis.push(data[i].sex);
                serData.push(data[i].zong);
            }
            return {
                xAxis : xAxis,
                serData : serData,
            };
        }

        function initChart(objects1) {
            var dom = document.getElementById("echarts-dataset");
            var myChart = echarts.init(dom);

            var option = {
                title: {
                    text: '用户性别统计',
                    textStyle: {
                        color: '#3d3d3d'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                backgroundColor: '#fff',
                textStyle: {
                    color: '#000',
                },
                tooltip: {},
                legend: {
                    data: ['女'],
                    textStyle: {
                        color: '#000'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: formatData(objects1).xAxis,
                    axisLabel: {
                        interval: 0,
                    }
                },
                yAxis: {},
                series: [{
                    name: ['女'],
                    type: 'bar',
                    color: function(params) {
                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                        var colorList = ['#c4ebad','#75c6ff'];
                        return colorList[params.dataIndex]
                    },
                    data: formatData(objects1).serData,
                    barWidth:40
                }]
            };
            myChart.setOption(option, true);

        };
        /**
         * 中国地图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');
        var optionMap = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {type: 'line', smooth: true, seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        echartsMap.setOption(optionMap);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
